<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>立方体</title>
    <style type="text/css">
      *{  padding: 0;margin: 0;}
      .box{
          width: 500px;
          /*转换元素的透视视图*/
          perspective: 1000px;
      }
      .cube{
          font-size: 32px;
          width: 100px;
          margin: 50px auto;
          transform-style: preserve-3d;
          -moz-transform-style: preserve-3d;
          -ms-transform-style: preserve-3d;
          -o-transform-style: preserve-3d;
          -webkit-transform-style: preserve-3d;
          transform: rotateX(-40deg) rotateY(35deg);
      }
      .side {
          position: absolute;
          width: 100px;
          height: 100px;
          background: rgba(255, 99, 71, 0.6);
          border: 1px solid rgba(0, 0, 0, 0.5);
          color: white;
          text-align: center;
          line-height: 100px;
      }
      .front {
          transform: translateZ(50px);
          -webkit-transform: translateZ(50px);
          -moz-transform:translateZ(50px);
          -ms-transform: translateZ(50px);
          -o-transform: translateZ(50px);
      }
      .top {
          transform: rotateX(90deg) translateZ(50px);
          -webkit-transform: rotateX(90deg) translateZ(50px);
          -moz-transform:rotateX(90deg) translateZ(50px);
          -ms-transform: rotateX(90deg) translateZ(50px);
          -o-transform: rotateX(90deg) translateZ(50px);
      }
      .right {
          transform: rotateY(90deg) translateZ(50px);
          -webkit-transform: rotateY(90deg) translateZ(50px);
          -moz-transform:rotateY(90deg) translateZ(50px);
          -ms-transform: rotateY(90deg) translateZ(50px);
          -o-transform: rotateY(90deg) translateZ(50px);
      }
      .left {
          transform: rotateY(-90deg) translateZ(50px);
          -webkit-transform: rotateY(-90deg) translateZ(50px);
          -moz-transform:rotateY(-90deg) translateZ(50px);
          -ms-transform: rotateY(-90deg) translateZ(50px);
          -o-transform: rotateY(-90deg) translateZ(50px);
      }
      .bottom {
          transform: rotateX(-90deg) translateZ(50px);
          -webkit-transform: rotateX(-90deg) translateZ(50px);
          -moz-transform:rotateX(-90deg) translateZ(50px);
          -ms-transform: rotateX(-90deg) translateZ(50px);
          -o-transform: rotateX(-90deg) translateZ(50px);
      }
      .back {
          transform: rotateY(-180deg) translateZ(50px);
          -webkit-transform: rotateY(-180deg) translateZ(50px);
          -moz-transform:rotateY(-180deg) translateZ(50px);
          -ms-transform: rotateY(-180deg) translateZ(50px);
          -o-transform: rotateY(-180deg) translateZ(50px);
      }
    </style>
</head>
<body>
<div class="box">
    <div class="cube">
        <div class="side front">1</div>  <!--正面 -->
        <div class="side back">6</div>   <!--背面 -->
        <div class="side right">4</div>  <!-- 右面-->
        <div class="side left">3</div>   <!--左面 -->
        <div class="side top">5</div>    <!-- 上面-->
        <div class="side bottom">2</div> <!--下面 -->
    </div>
</div>
</body>
</html>